<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        .heart{
            width: 400px;
            height: 400px;
            margin: 100px auto;
            background: skyblue;
            display: flex;

        }
        .heart div{
            width: 100px;
            height: 150px;
            background: red;          
            border-radius:50px 50px 0 0 ;
            
        }
        .heart div:nth-child(1){
            transform-origin: right bottom;
            transform: rotate(45deg) ;
            animation: heartbeat1 0.1s alternate  infinite;

        }
        .heart div:nth-child(2){
            transform-origin: left bottom;
            transform: rotate(-45deg) ;
            animation: heartbeat 0.1s alternate  infinite;
        }
         @keyframes heartbeat {
            0% {
              
               transform:rotate(-45deg) scale(1.0);
            }
            100% {
                
                 transform:rotate(-45deg) scale(1.5);
            }
            /*50% {
               width: 250px;
               height: 300px;
               border-radius: 200px 200px 0 0;
            }
            75% {
                width: 300px;
                height: 350px;
                border-radius: 250px 250px 0 0;
            }
            100% {
                width: 400px;
                height: 400px;
                border-radius: 300px 300px 0 0;
            }*/
        }
         @keyframes heartbeat1{
            0% {
               
              
               transform:rotate(45deg) scale(1.0);
            }
            100% {
                
                
                 transform:rotate(45deg) scale(1.5);
            }
         }
    </style>    
</head>
<body>
    <div class="heart">
        <div></div>
        <div></div>

    </div>
</body>
</html>